.boardRoot {
    @apply mt-8 flex w-full max-w-full snap-x items-center gap-4 overflow-x-auto pb-14;
}

.boardRoot::-webkit-scrollbar {
    @apply w-[12px] rounded-[10px] bg-[#292031]/30;
}

.boardRoot::-webkit-scrollbar-thumb {
    @apply rounded-[10px] border-[4px] border-solid border-[#302539] bg-brand-orange/40;
}

.headerContainer {
    @apply flex w-full flex-col;
}

.headerTopContainer {
    @apply mt-8 flex w-full flex-col gap-5 rounded-t-[10px] border border-b-[0px] border-[#6A57A480] bg-[#231B2E40] px-8 pb-8 pt-4 text-[14px] tracking-[0.04em] text-[#C1C1C1]/80;
}

.columnsContainer {
    @apply flex w-full flex-col gap-2 rounded-b-[10px] border border-[#6A57A480] border-t-[#6A57A480]/20 bg-[#231B2E40] px-8 py-6;
}

.columnsHeaderText {
    @apply text-[18px] font-semibold;
}

.columns {
    @apply flex min-h-[30px] w-[100%] flex-wrap pt-2;
}

.cardContainer {
    @apply relative h-[380px] w-full min-w-[280px] xl:min-h-[450px];
}

.card {
    @apply flex h-full w-full flex-col overflow-y-auto rounded-b-[10px] border-x border-b border-[#6A57A433] bg-[#231B2E40] px-2 py-3 xl:p-5;
}

.card::-webkit-scrollbar {
    @apply w-[12px] rounded-[10px] bg-[#292031]/30;
}

.card::-webkit-scrollbar-thumb {
    @apply rounded-[10px] border-[4px] border-solid border-[#302539] bg-brand-orange/40;
}

.cardHeader {
    @apply flex items-center justify-center rounded-t-[10px] border-x border-t-[1px] border-[#6A57A433] py-3 text-[18px] font-medium text-[#FFFFFF];
}

.button {
    @apply m-1 h-fit w-fit min-w-[100px] max-w-[220px] break-words rounded-[5px] border border-[#6A57A433] px-4 py-3 text-[14px] font-medium text-[#DFD8F5] hover:cursor-pointer xl:max-w-[240px] 2xl:max-w-[260px];
}

.buttonBackground {
    background: linear-gradient(0deg, #40335c, #40335c),
        linear-gradient(0deg, rgba(106, 87, 164, 0.2), rgba(106, 87, 164, 0.2));
}

.messageContainer {
    @apply absolute -top-[100px] left-1/2 flex -translate-x-1/2 flex-col items-center;
}

.bounce {
    @apply flex flex-col items-center;
    animation: bounceAnimation 0.5s ease infinite;
}

.message {
    @apply flex w-[320px] items-center rounded-[5px] bg-[#292135] py-3 text-center;
}

.messageText {
    @apply -mt-1 text-[18px] font-medium;
}

.bottomMessage {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #292135;
}

@keyframes bounceAnimation {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }
}